<template>
  <div class="user">
    <el-table
      :default-sort="{prop: 'date', order: 'descending'}"
      :data="userData.filter(userData => !search || userData.userName.toLowerCase().includes(search.toLowerCase()))"
    >
      <el-table-column label="账号" prop="userName"></el-table-column>
      <el-table-column label="创建日期" prop="created" sortable>
        <template slot-scope="scope">{{scope.row.created | setDate}}</template>
      </el-table-column>
      <el-table-column label="权限" prop="class">
        <template slot-scope="scope">{{scope.row.class === 1 ? "管理员": '会员'}}</template>
      </el-table-column>
      <el-table-column label="文章数" width="100" prop="skillNumber"></el-table-column>
      <el-table-column label="积分" width="100" prop="integral"></el-table-column>
      <el-table-column label="账号状态" prop="state">
        <template slot-scope="scope">{{scope.row.state === 1 ? "已冻结": '正常'}}</template>
      </el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="freeze(scope.$index, scope.row)">冻结账号</el-button>
          <el-button size="mini" @click="deleteFreeze(scope.$index, scope.row)">解冻</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapActions } from "Vuex";
export default {
  name: "admin-user",
  data() {
    return {
      userData: [],
      search: ""
    };
  },
  mounted() {
    this.getAllUserData({ limit: 500, skip: 0 })
      .then(res => {
        if (res.data.ok === 1) {
          this.userData = res.data.data;
        }
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    freeze(index, row) {
      let state = 1;
      this.setUserDataState({
        state,
        id: row._id
      });
      row.state = 1;
    },
    deleteFreeze(index, row) {
      let state = 0;
      this.setUserDataState({
        state,
        id: row._id
      });
      row.state = 0;
    },
    ...mapActions("user", ["getAllUserData", "setUserDataState"])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.user
  width: 100%
  min-height: 700px
</style>